<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增收货地址 - {$config.WEB_SITE_TITLE}</title>
    <script src="__PUBLIC__/Home/js/adaptive.js"></script>
    <script src="__PUBLIC__/Home/js/device.min.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/Home/css/reset.css">
    <link rel="stylesheet" href="__PUBLIC__/Home/css/con-header.css">
    <script src="__PUBLIC__/Home/js/mui.min.js"></script>
    <link href="__PUBLIC__/Home/css/mui.min.css" rel="stylesheet"/>

    <link href="__PUBLIC__/Home/city/mui.picker.css" rel="stylesheet"/>
    <link href="__PUBLIC__/Home/city/mui.poppicker.css" rel="stylesheet"/>
    <style>
        h4,h5{margin-top: 0px;margin-bottom: 0px;}
        input::-webkit-input-placeholder,
        textarea::-webkit-input-placeholder {
            color: #9B9B9B;font-size: 0.3rem;
        }

        .content{width: 7.5rem;height: auto;margin: 0 auto;background: #F0F0F0;margin-top: 0.88rem;}
        .top a{position: absolute;right: 0.3rem;bottom: 0.1rem;color: #fff;}


           .xiugai{width: 100%;height: auto;padding: 0px 0.2rem;background: #fff}
           .xiugai li{width: 100%;height: 0.9rem;border-bottom: 1px solid #DEDEDE;color: #4A4A4A;line-height: 0.9rem;position: relative;font-size: 0.32rem;}
           .xiugai li input{width: 5.5rem;height: 0.8rem;border: none;outline: none;position: absolute;left: 1.5rem;text-align: right }
        .xiugai li:nth-child(4){border-bottom: none;height: 2rem;position: relative}
        .xiugai li:nth-child(3) span{float: right;font-size: 0.3rem;color: #999}
        .xiugai li:nth-child(3) span img{width: 0.2rem;height: 0.3rem;margin-left: 0.1rem;position: relative;top: 0.05rem;}
        .xiugai li textarea{width: 100%;height: 2rem;resize: none;border: none;position: absolute;top: 0px;}

        .shanchu{width: 100%;height: 0.9rem;color: #333;line-height: 0.9rem;padding-left: 0.2rem;font-size: 0.34rem;display: block;margin-top: 0.2rem;
        background: #fff}
        .shanchu a{float: right}

        .juzhong{width: 90%;height: 0.9rem;border-radius: 0.5rem;text-align: center;background: #19B7BE;color: #fff;font-size: 0.32rem;margin-top: 1rem;}


        .advice{height: 0.4rem;width: 0.4rem;display: inline-block;margin-right: 0.2rem;
            background-image: url("__PUBLIC__/Home/img/p-shdz.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            vertical-align: middle;
            margin-top: -4px;
            border-radius: 0.05rem;
        }
        input[type="checkbox"]:checked + .advice{
            height: 0.4rem;width: 0.4rem;
            background-image: url("__PUBLIC__/Home/img/p-shdz2.png");
            border-radius: 0.1rem;
        }
    </style> 
</head>
<body>
<div class="content">
    <div class="top">
        <h4>添加新地址</h4>
        <span class="back"></span>
    </div>

    <ul class="xiugai">
     <form action="" method="post">  
        <li>收货人 <input type="text" name="accept"></li>
        <li>联系方式 <input type="text" name="tel"></li>
        <li>所在地区 <span class="openarea">请选择 <img src="__PUBLIC__/Home/img/back-right.png" alt=""></span></li>
        <li><textarea name="detail" id="" cols="30" rows="10" placeholder="详细地址"></textarea></li>

    </ul>
    <span class="shanchu">设为默认地址
        <a>
            <input type="checkbox" name="is_def" id="adviceRadio1" value="1"   hidden/>
                <label for="adviceRadio1" class="advice"></label>
        </a>
    </span>
    <input type="hidden" name="pro" class="pro_">
    <input type="hidden" name="city" class="city_">
    <input type="hidden" name="area" class="area_">
    <button class="juzhong" type="submit">确认保存</button>
    </form> 
</div>
    <script src="__PUBLIC__/Home/js/jquery-1.11.1.js"></script>
    <script src="__PUBLIC__/Home/city/city.data-3.js"></script>
<script src="__PUBLIC__/Home/city/mui.picker.js"></script>
<script src="__PUBLIC__/Home/city/mui.poppicker.js"></script>
    <script>
        $(".back").click(function () {
            window.history.back(-1);
        })

$(".openarea").click(function () {
           //触发事件
             var adressStr = '';
            //显示几层，我们要显示省、市、区，所以我们这里写三层，如果不写默认是一层
            var addressPicker = new mui.PopPicker({
                layer: 3
            });
            addressPicker.setData(cityData3);
            //city.data-3.js中的数据

            addressPicker.show(function (selectItems) {
               var pro_n=selectItems[0]['value'];
               var city_n=selectItems[1]['value'];
               var area_n=selectItems[2]['value'];
               //var local=pro+'-'+city+'-'+area
               
               $(".pro_").val(pro_n);
               $(".city_").val(area_n);
               $(".area_").val(area_n);
              
                //将选择的省、市、区显示到屏幕上
                for (var i = 0; i < selectItems.length; i++) {
                    adressStr = adressStr+'  '+selectItems[i].text;
                    
                }
                $(".openarea").html(adressStr);
                // 显示标签
                //$(".dizhi").html(adressStr) ;
            });
         })


    </script>
</body>
</html>